<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类查询 - 图书馆管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <style>
        body {
            background-color: #f8f9fa;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
        
        .main-container {
            margin: 20px auto;
            max-width: 1200px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header-section {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 20px 30px;
        }
        
        .header-section h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 500;
        }
        
        .search-section {
            padding: 25px 30px;
            border-bottom: 1px solid #e9ecef;
            background: #f8f9fa;
        }
        
        .content-section {
            padding: 25px 30px;
        }
        
        .status-badge {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
        }
        
        .level-badge {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 8px;
            background-color: #6c757d;
            color: white;
        }
        
        .table-responsive {
            border-radius: 8px;
            overflow: hidden;
        }
        
        .table th {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
        }
        
        .table td {
            vertical-align: middle;
            padding: 12px 8px;
        }
        
        .action-btn {
            margin: 0 2px;
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 4px;
        }
        
        .search-form .form-control {
            border-radius: 8px;
        }
        
        .btn {
            border-radius: 8px;
            font-weight: 500;
        }
        
        .pagination {
            margin: 0;
        }
        
        .pagination .page-link {
            border-radius: 6px;
            margin: 0 2px;
            border: 1px solid #dee2e6;
        }
        
        .pagination .page-item.active .page-link {
            background-color: #28a745;
            border-color: #28a745;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .loading-spinner {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        
        .category-path {
            font-size: 12px;
            color: #6c757d;
        }
        
        .tree-indent {
            margin-left: 20px;
        }
        
        .collapse-btn {
            background: none;
            border: none;
            color: #6c757d;
            font-size: 14px;
            padding: 0 5px;
        }
        
        .collapse-btn:hover {
            color: #28a745;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .main-container {
                margin: 10px;
                border-radius: 8px;
            }
            
            .header-section,
            .search-section,
            .content-section {
                padding: 15px 20px;
            }
            
            .header-section h1 {
                font-size: 20px;
            }
            
            .table-responsive {
                font-size: 14px;
            }
            
            .table td {
                padding: 8px 4px;
            }
            
            .action-btn {
                padding: 2px 6px;
                font-size: 11px;
            }
            
            .search-form .row > div {
                margin-bottom: 10px;
            }
        }
        
        @media (max-width: 576px) {
            .table-responsive {
                font-size: 12px;
            }
            
            .btn-sm {
                font-size: 11px;
                padding: 4px 8px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="main-container">
            <!-- Header Section -->
            <div class="header-section">
                <h1><i class="fas fa-sitemap me-2"></i>分类查询管理</h1>
            </div>
            
            <!-- Search Section -->
            <div class="search-section">
                <form class="search-form" @submit.prevent="searchCategories">
                    <div class="row g-3">
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label">分类代码</label>
                            <input type="text" class="form-control" v-model="searchForm.categoryCode" placeholder="请输入分类代码">
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label">分类名称</label>
                            <input type="text" class="form-control" v-model="searchForm.categoryName" placeholder="请输入分类名称">
                        </div>
                        <div class="col-md-2 col-sm-6">
                            <label class="form-label">分类层级</label>
                            <select class="form-select" v-model="searchForm.categoryLevel">
                                <option value="">全部层级</option>
                                <option value="1">第1层</option>
                                <option value="2">第2层</option>
                                <option value="3">第3层</option>
                                <option value="4">第4层</option>
                                <option value="5">第5层</option>
                            </select>
                        </div>
                        <div class="col-md-2 col-sm-6">
                            <label class="form-label">状态</label>
                            <select class="form-select" v-model="searchForm.isActive">
                                <option value="">全部状态</option>
                                <option value="true">启用</option>
                                <option value="false">禁用</option>
                            </select>
                        </div>
                        <div class="col-md-2 col-sm-12">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid gap-2 d-md-flex">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fas fa-search me-1"></i>查询
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" @click="resetSearch">
                                    <i class="fas fa-undo me-1"></i>重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
            <!-- Error Alert -->
            <div v-if="error" class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                {{ error }}
                <button type="button" class="btn-close" @click="error = ''" aria-label="Close"></button>
            </div>

            <!-- Content Section -->
            <div class="content-section">
                <!-- Toolbar -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex gap-2">
                        <button class="btn btn-success btn-sm" @click="refreshData">
                            <i class="fas fa-sync-alt me-1"></i>刷新
                        </button>
                        <button class="btn btn-info btn-sm" @click="toggleTreeView">
                            <i class="fas fa-sitemap me-1"></i>{{ treeView ? '列表视图' : '树形视图' }}
                        </button>
                        <button class="btn btn-outline-primary btn-sm" @click="exportData">
                            <i class="fas fa-download me-1"></i>导出
                        </button>
                    </div>
                    <div class="text-muted">
                        共 {{ pagination.total }} 条记录
                    </div>
                </div>
                
                <!-- Data Table -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th style="width: 60px;">序号</th>
                                <th style="width: 120px;">分类代码</th>
                                <th>分类名称</th>
                                <th style="width: 80px;">层级</th>
                                <th style="width: 100px;">父分类</th>
                                <th style="width: 80px;">状态</th>
                                <th style="width: 80px;">子分类</th>
                                <th style="width: 80px;">图书数</th>
                                <th style="width: 120px;">创建时间</th>
                                <th style="width: 120px;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="loading">
                                <td colspan="10" class="text-center py-4">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                    <div class="mt-2">正在加载数据...</div>
                                </td>
                            </tr>
                            <tr v-else-if="categories.length === 0">
                                <td colspan="10" class="text-center py-4 text-muted">
                                    <i class="fas fa-inbox fa-2x mb-2"></i>
                                    <div>暂无数据</div>
                                </td>
                            </tr>
                            <template v-else>
                                <tr v-for="(category, index) in categories" :key="category.categoryId">
                                    <td>{{ (pagination.pageNum - 1) * pagination.pageSize + index + 1 }}</td>
                                    <td>
                                        <code>{{ category.categoryCode }}</code>
                                    </td>
                                    <td>
                                        <div v-if="treeView" :style="{ marginLeft: (category.categoryLevel - 1) * 20 + 'px' }">
                                            <button v-if="category.hasChildren" 
                                                    class="collapse-btn" 
                                                    @click="toggleCategory(category.categoryId)">
                                                <i :class="expandedCategories.includes(category.categoryId) ? 'fas fa-minus-square' : 'fas fa-plus-square'"></i>
                                            </button>
                                            <i v-else class="fas fa-file-alt text-muted me-1"></i>
                                            {{ category.categoryName }}
                                        </div>
                                        <div v-else>
                                            {{ category.categoryName }}
                                            <div v-if="category.parentCategoryName" class="category-path">
                                                <i class="fas fa-sitemap me-1"></i>{{ category.parentCategoryName }}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="level-badge">L{{ category.categoryLevel }}</span>
                                    </td>
                                    <td>
                                        <span v-if="category.parentCategoryName" class="text-muted small">
                                            {{ category.parentCategoryName }}
                                        </span>
                                        <span v-else class="text-muted">-</span>
                                    </td>
                                    <td>
                                        <span :class="['badge', category.isActive ? 'bg-success' : 'bg-danger']">
                                            {{ category.isActive ? '启用' : '禁用' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ category.childCount || 0 }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ category.bookCount || 0 }}</span>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ formatDateTime(category.createdTime) }}</small>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-outline-primary btn-sm action-btn" 
                                                    @click="viewCategory(category)" 
                                                    title="查看详情">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn btn-outline-info btn-sm action-btn" 
                                                    @click="viewChildren(category)" 
                                                    title="查看子分类"
                                                    :disabled="!category.hasChildren">
                                                <i class="fas fa-sitemap"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-4" v-if="pagination.total > 0">
                    <div class="text-muted">
                        显示第 {{ (pagination.pageNum - 1) * pagination.pageSize + 1 }} 到 
                        {{ Math.min(pagination.pageNum * pagination.pageSize, pagination.total) }} 条，
                        共 {{ pagination.total }} 条记录
                    </div>
                    <nav>
                        <ul class="pagination pagination-sm">
                            <li class="page-item" :class="{ disabled: pagination.pageNum <= 1 }">
                                <a class="page-link" href="#" @click.prevent="changePage(pagination.pageNum - 1)">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            </li>
                            <li v-for="page in visiblePages" 
                                :key="page" 
                                class="page-item" 
                                :class="{ active: page === pagination.pageNum }">
                                <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                            </li>
                            <li class="page-item" :class="{ disabled: pagination.pageNum >= pagination.totalPages }">
                                <a class="page-link" href="#" @click.prevent="changePage(pagination.pageNum + 1)">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        
        <!-- Category Detail Modal -->
        <div class="modal fade" id="categoryDetailModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-info-circle me-2"></i>分类详情
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" v-if="selectedCategory">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td class="text-muted" style="width: 100px;">分类ID:</td>
                                        <td>{{ selectedCategory.categoryId }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">分类代码:</td>
                                        <td><code>{{ selectedCategory.categoryCode }}</code></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">分类名称:</td>
                                        <td><strong>{{ selectedCategory.categoryName }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">分类层级:</td>
                                        <td><span class="level-badge">L{{ selectedCategory.categoryLevel }}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">状态:</td>
                                        <td>
                                            <span :class="['badge', selectedCategory.isActive ? 'bg-success' : 'bg-danger']">
                                                {{ selectedCategory.isActive ? '启用' : '禁用' }}
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td class="text-muted" style="width: 100px;">父分类:</td>
                                        <td>{{ selectedCategory.parentCategoryName || '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">排序:</td>
                                        <td>{{ selectedCategory.sortOrder }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">子分类数:</td>
                                        <td><span class="badge bg-info">{{ selectedCategory.childCount || 0 }}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">图书数:</td>
                                        <td><span class="badge bg-primary">{{ selectedCategory.bookCount || 0 }}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">创建时间:</td>
                                        <td>{{ formatDateTime(selectedCategory.createdTime) }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div v-if="selectedCategory.description" class="mt-3">
                            <h6 class="text-muted">描述信息:</h6>
                            <p class="text-muted">{{ selectedCategory.description }}</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Loading Overlay -->
        <div v-if="loading" class="loading-overlay">
            <div class="loading-spinner">
                <div class="spinner-border text-primary mb-3" role="status"></div>
                <div>正在加载数据...</div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Vue.js 2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <!-- Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    error: '', // 错误信息
                    treeView: false,
                    expandedCategories: [],
                    categories: [],
                    selectedCategory: null,
                    baseURL: '', // 后端服务地址，在mounted中初始化
                    searchForm: {
                        categoryCode: '',
                        categoryName: '',
                        categoryLevel: '',
                        isActive: '',
                        keyword: '',
                        sortField: 'sort_order',
                        sortOrder: 'asc'
                    },
                    pagination: {
                        pageNum: 1,
                        pageSize: 10,
                        total: 0,
                        totalPages: 0
                    }
                };
            },
            computed: {
                visiblePages() {
                    const pages = [];
                    const total = this.pagination.totalPages;
                    const current = this.pagination.pageNum;
                    
                    if (total <= 7) {
                        for (let i = 1; i <= total; i++) {
                            pages.push(i);
                        }
                    } else {
                        if (current <= 4) {
                            for (let i = 1; i <= 5; i++) {
                                pages.push(i);
                            }
                            pages.push('...');
                            pages.push(total);
                        } else if (current >= total - 3) {
                            pages.push(1);
                            pages.push('...');
                            for (let i = total - 4; i <= total; i++) {
                                pages.push(i);
                            }
                        } else {
                            pages.push(1);
                            pages.push('...');
                            for (let i = current - 1; i <= current + 1; i++) {
                                pages.push(i);
                            }
                            pages.push('...');
                            pages.push(total);
                        }
                    }
                    
                    return pages.filter(page => page !== '...' || pages.indexOf(page) === pages.lastIndexOf(page));
                }
            },
            mounted() {
                // 在mounted中初始化baseURL
                this.baseURL = this.getBaseURL();
                console.log('后端服务地址:', this.baseURL);
                console.log('当前页面地址:', window.location.href);
                this.loadCategories();
            },
            methods: {
                getBaseURL() {
                    // 自动检测后端服务地址
                    const protocol = window.location.protocol;
                    const hostname = window.location.hostname;
                    
                    // 如果当前页面在8081端口，直接使用当前地址
                    if (window.location.port === '8081') {
                        return `${protocol}//${hostname}:8081`;
                    }
                    
                    // 否则默认使用8081端口
                    return `${protocol}//${hostname}:8081`;
                },
                async loadCategories() {
                    this.loading = true;
                    this.error = ''; // 清除之前的错误
                    
                    console.log('开始加载分类数据...');
                    console.log('当前baseURL:', this.baseURL);
                    
                    try {
                        const params = {
                            pageNum: this.pagination.pageNum,
                            pageSize: this.pagination.pageSize
                        };
                        
                        // 添加搜索参数，确保与后端API匹配
                        if (this.searchForm.categoryLevel) {
                            params.categoryLevel = parseInt(this.searchForm.categoryLevel);
                        }
                        if (this.searchForm.isActive !== '') {
                            params.isActive = this.searchForm.isActive === 'true';
                        }
                        
                        // 将categoryCode和categoryName合并为keyword参数
                        let keyword = '';
                        if (this.searchForm.categoryCode) {
                            keyword = this.searchForm.categoryCode;
                        } else if (this.searchForm.categoryName) {
                            keyword = this.searchForm.categoryName;
                        }
                        if (keyword) {
                            params.keyword = keyword;
                        }
                        
                        // 排序参数 - 注意后端使用sortBy和sortDir
                        if (this.searchForm.sortField) {
                            params.sortBy = this.searchForm.sortField;
                        }
                        if (this.searchForm.sortOrder) {
                            params.sortDir = this.searchForm.sortOrder;
                        }
                        
                        // 统计信息参数
                        params.includeStatistics = true;
                        
                        console.log('请求URL:', `${this.baseURL}/api/categories`);
                        console.log('请求参数:', params);
                        
                        const response = await axios.get(`${this.baseURL}/api/categories`, { 
                            params,
                            timeout: 10000,
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        });
                        
                        console.log('API响应:', response);
                        
                        if (response.data.success) {
                            const data = response.data.data;
                            this.categories = data.categories || [];
                            this.pagination = {
                                pageNum: data.pageNum || 1,
                                pageSize: data.pageSize || 10,
                                total: data.total || 0,
                                totalPages: data.totalPages || 0
                            };
                            console.log('数据加载成功，记录数:', this.categories.length);
                        } else {
                            console.error('API返回失败:', response.data);
                            this.showError('加载数据失败: ' + response.data.message);
                        }
                    } catch (error) {
                        console.error('加载分类数据失败:', error);
                        
                        // 详细的错误处理
                        let errorMessage = '网络错误，请稍后重试';
                        if (error.code === 'ECONNREFUSED' || error.message.includes('Network Error')) {
                            errorMessage = '无法连接到服务器，请检查服务是否启动 (端口8081)';
                        } else if (error.response) {
                            errorMessage = `服务器错误 (${error.response.status}): ${error.response.data?.message || error.response.statusText}`;
                            console.error('响应错误详情:', error.response.data);
                        } else if (error.request) {
                            errorMessage = '请求发送失败，可能是网络或CORS问题';
                            console.error('请求错误:', error.request);
                        }
                        
                        this.showError(errorMessage);
                    } finally {
                        this.loading = false;
                    }
                },
                
                async loadCategoryTree() {
                    this.loading = true;
                    try {
                        const response = await axios.get(`${this.baseURL}/api/categories/tree`, {
                            params: { includeInactive: true }
                        });
                        
                        if (response.data.success) {
                            this.categories = this.flattenTree(response.data.data);
                            this.pagination.total = this.categories.length;
                        } else {
                            this.showError('加载树形数据失败: ' + response.data.message);
                        }
                    } catch (error) {
                        console.error('加载分类树失败:', error);
                        this.showError('网络错误，请稍后重试');
                    } finally {
                        this.loading = false;
                    }
                },
                
                flattenTree(tree, level = 1) {
                    let result = [];
                    tree.forEach(node => {
                        const item = {
                            ...node,
                            categoryLevel: level,
                            hasChildren: node.children && node.children.length > 0
                        };
                        result.push(item);
                        
                        if (node.children && node.children.length > 0) {
                            if (this.expandedCategories.includes(node.categoryId)) {
                                result = result.concat(this.flattenTree(node.children, level + 1));
                            }
                        }
                    });
                    return result;
                },
                
                searchCategories() {
                    this.pagination.pageNum = 1;
                    this.loadCategories();
                },
                
                resetSearch() {
                    this.searchForm = {
                        categoryCode: '',
                        categoryName: '',
                        categoryLevel: '',
                        isActive: '',
                        keyword: '',
                        sortField: 'sort_order',
                        sortOrder: 'asc'
                    };
                    this.pagination.pageNum = 1;
                    this.loadCategories();
                },
                
                changePage(page) {
                    if (page >= 1 && page <= this.pagination.totalPages && page !== this.pagination.pageNum) {
                        this.pagination.pageNum = page;
                        this.loadCategories();
                    }
                },
                
                refreshData() {
                    this.loadCategories();
                },
                
                toggleTreeView() {
                    this.treeView = !this.treeView;
                    if (this.treeView) {
                        this.loadCategoryTree();
                    } else {
                        this.loadCategories();
                    }
                },
                
                toggleCategory(categoryId) {
                    const index = this.expandedCategories.indexOf(categoryId);
                    if (index > -1) {
                        this.expandedCategories.splice(index, 1);
                    } else {
                        this.expandedCategories.push(categoryId);
                    }
                    this.loadCategoryTree();
                },
                
                async viewCategory(category) {
                    try {
                        const response = await axios.get(`${this.baseURL}/api/categories/${category.categoryId}`);
                        if (response.data.success) {
                            this.selectedCategory = response.data.data;
                            const modal = new bootstrap.Modal(document.getElementById('categoryDetailModal'));
                            modal.show();
                        } else {
                            this.showError('获取分类详情失败: ' + response.data.message);
                        }
                    } catch (error) {
                        console.error('获取分类详情失败:', error);
                        this.showError('网络错误，请稍后重试');
                    }
                },
                
                async viewChildren(category) {
                    this.searchForm.parentCategoryId = category.categoryId;
                    this.searchForm.categoryName = '';
                    this.searchForm.categoryCode = '';
                    this.pagination.pageNum = 1;
                    this.loadCategories();
                },
                
                exportData() {
                    // 导出功能实现
                    const csvContent = this.generateCSV();
                    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = `categories_${new Date().toISOString().split('T')[0]}.csv`;
                    link.click();
                },
                
                generateCSV() {
                    const headers = ['分类ID', '分类代码', '分类名称', '父分类', '层级', '状态', '子分类数', '图书数', '创建时间'];
                    const rows = this.categories.map(category => [
                        category.categoryId,
                        category.categoryCode,
                        category.categoryName,
                        category.parentCategoryName || '',
                        category.categoryLevel,
                        category.isActive ? '启用' : '禁用',
                        category.childCount || 0,
                        category.bookCount || 0,
                        this.formatDateTime(category.createdTime)
                    ]);
                    
                    return [headers, ...rows].map(row => row.join(',')).join('\n');
                },
                
                formatDateTime(dateTime) {
                    if (!dateTime) return '-';
                    return new Date(dateTime).toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                },
                
                showError(message) {
                    this.error = message;
                    // 自动隐藏错误信息
                    setTimeout(() => {
                        this.error = '';
                    }, 10000);
                },
                
                showSuccess(message) {
                    alert('成功: ' + message);
                }
            }
        });
    </script>
</body>
</html>
